<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <!-- #ifndef MP-WEIXIN -->
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left"
                      @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
                <view class="kaoshi-head-m">考试记录</view>
            </view>
        </view>
        <!--#endif-->
        <view>
            <view class="index-content">
                <view class="index-tiku">
                    <block v-for="(item, index) in list" :key="index">
                        <view class="index-tiku-content">
                            <view class="index-tiku-content-flex">
                                <view class="index-tiku-content-top">
                                    <view>{{item.exam_name}}</view>
                                </view>
                                <view class="pub-orange">{{item.score}}分</view>
                            </view>
                            <view class="index-tiku-content-flex">
                                <view class="index-tiku-content-bottom">
                                    <view class="pub-gray">考试时间：{{item.up_time}}</view>
                                </view>
                                <view class="record-type" v-if="item.type == 2">模拟考试</view>
                                <view class="record-type" v-if="item.type == 1">考试</view>
                            </view>
                        </view>
                    </block>
                    <no-recode :show="is_recode"></no-recode>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import {mapState} from 'vuex'
    import noRecode from '@/components/no-recode.vue'
    import WucTab from '@/components/wuc-tab/wuc-tab.vue';

    export default {
        data() {
            return {
                order_sort: [
                    {name: '模拟考试', goods_type: '1'},
                    {name: '考试', goods_type: '2'}
                ],
                current_id: '0',
                current_index: 0,
                list: []
            }
        },
        onShow() {
            this.getList()
        },
        mounted() {

        },
        computed: {
            ...mapState(['subject']),
            is_recode() {
                return (this.list.length === 0)
            }
        },
        components: {WucTab, noRecode},
        methods: {
            async getList() {
                let res = await this.$myHttp.post({
                    // 考试记录
                    url: this.$myHttp.urlMap.record,
                    data: {
                        subject_id: this.subject.id,
                        page: 1,
                        limit: 10
                    },
                    needLogin: true
                })
                if (res.code === 1) {
                    let rows = res.data.data || []
                    this.list = rows
                    for (let index in this.list){
                        this.list[index].up_time = this.$myUtils.$common.formatDate(
                            this.list[index].up_time * 1000,
                            "Y年M月D日 h:m:s"
                        );
                    }
                }
            }
        }
    }
</script>
<style>
    page {
        background: #f6f7f9;
    }

    .index-tiku {
        background: #fff;
    }

    .index-tiku-title {
        width: 92%;
        margin: 0 auto;
        padding: 15px 0 8px 0;
        font-weight: bold;
        font-size: 18px;
    }

    .index-tiku-content {
        width: 92%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        padding: 14px 0;
        border-bottom: solid 1px #f5f5f5;
    }

    .index-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .index-tiku-content .index-tiku-content-flex:first-child {
        padding-bottom: 6px;
    }

    .index-tiku-content .index-tiku-content-flex:last-child {
        font-size: 14px;
    }

    .index-tiku-content-top {
        display: flex;
        align-items: center;
    }

    .index-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .index-tiku-content-bottom {
        display: flex;
        align-items: center;
    }

    .icon-jiantou8 {
        color: #a5a5a5;
        font-size: 15px;
    }

    .index-tiku-content1 {
        width: 100%;
        font-size: 14px;
    }

    .index-tiku-content1 .index-tiku-content-flex {
        border-bottom: solid 1px #f5f5f5;
        padding: 12px 0;
        width: 92%;
        line-height: 17px;
        margin: 0 auto;
    }

    .index-tiku-content1-border {
        border-bottom: solid 14px #efeff4;
    }

    .kt-r {
        border: solid 1px #fd850a;
        color: #fd850a;
        font-size: 14px;
        padding: 2px 10px;
        border-radius: 4px;
        margin-left: 10px;
    }
    .record-type{
        background: #ececec;
        color: #3c7bfc;
        padding: 5px 12px;
        font-size: 12px;
        margin-left: 8px;
        border-radius: 14px 14px 14px 0;
    }
</style>
